﻿@using Smartstore.Web.Models.Identity

@model RegisterModel

@{
    Assets.AppendTitleParts(T("PageTitle.Register"));
    var returnUrl = Context.Request.Query["returnUrl"].ToString();
}

<form asp-route="Register" asp-route-returnUrl="@returnUrl" id="register-form" method="post" class="form-horizontal">
    <div class="page registration-page">
        <div class="page-title">
            <h1 class="h3">@T("Account.Register")</h1>
        </div>
        <div class="page-body row">
            <div class="col-12 col-lg-9 col-xl-8">

                <div asp-validation-summary="ModelOnly"></div>

                <fieldset class="content-group">
                    <legend><span>@T("Account.YourPersonalDetails")</span></legend>

                    <honeypot sm-enabled="true" />

                    <fieldset sm-if="Model.GenderEnabled" class="form-group row">
                        <legend class="col-md-3 col-form-label fwm pt-0">@T("Account.Fields.Gender")</legend>
                        <div class="col-md-9">
                            <div class="form-check form-check-inline">
                                <input type="radio" asp-for="Gender" sm-ignore-label="true" class="form-check-input remember" id="gender-male" value="M" attr-checked='(Model.Gender == "M", "checked")' />
                                <label class="form-check-label" for="gender-male">@T("Account.Fields.Gender.Male")</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" asp-for="Gender" sm-ignore-label="true" class="form-check-input remember" id="gender-female" value="F" attr-checked='(Model.Gender == "F", "checked")' />
                                <label class="form-check-label" for="gender-female">@T("Account.Fields.Gender.Female")</label>
                            </div>
                        </div>
                    </fieldset>

                    <div class="form-group row">
                        <label asp-for="FirstName" class="col-md-3 col-form-label" attr-class='(Model.FirstNameRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="FirstName" sm-required="Model.FirstNameRequired" class="remember" autocomplete="given-name" />
                            <span asp-validation-for="FirstName"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label asp-for="LastName" class="col-md-3 col-form-label" attr-class='(Model.LastNameRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="LastName" sm-required="Model.LastNameRequired" class="remember" autocomplete="family-name" />
                            <span asp-validation-for="LastName"></span>
                        </div>
                    </div>

                    <div sm-if="Model.DateOfBirthEnabled" class="form-group row">
                        <div class="col-md-3">
                            <label asp-for="DateOfBirth" class="col-form-label"></label>
                        </div>
                        <div class="col-md-9">
                            <input type="date" asp-for="DateOfBirth"
                                   class="native-validation"
                                   autocomplete="bday"
                                   max="@DateTime.Now.ToString("yyyy-MM-dd")"
                                   min="@DateTime.Now.AddYears(-110).ToString("yyyy-MM-dd")" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <label asp-for="Email" class="col-md-3 col-form-label required"></label>
                        <div class="col-md-9">
                            <input asp-for="Email" sm-required="true" class="remember" autocomplete="email" />
                            <span asp-validation-for="Email"></span>
                        </div>
                    </div>

                    <div sm-if="Model.UsernamesEnabled" class="form-group row">
                        <label asp-for="Username" class="col-md-3 col-form-label required"></label>
                        <div class="col-md-9">
                            @if (Model.CheckUsernameAvailabilityEnabled)
                            {
                                <div class="input-group">
                                    <input asp-for="Username" class="remember" autocomplete="username" />
                                    <partial name="_CheckUsernameAvailability" />
                                </div>
                            }
                            else
                            {
                                <input asp-for="Username" class="remember" autocomplete="username" />
                            }
                            <span asp-validation-for="Username"></span>
                        </div>
                    </div>

                    <zone name="gdpr_consent" />
                </fieldset>

                <fieldset class="content-group">
                    <legend><span>@T("Account.YourPassword")</span></legend>

                    <div class="form-group row">
                        <label asp-for="Password" class="col-md-3 col-form-label required"></label>
                        <div class="col-md-9">
                            <input asp-for="Password" type="password" sm-required="true" autocomplete="new-password" />
                            <span asp-validation-for="Password"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label asp-for="ConfirmPassword" class="col-md-3 col-form-label required"></label>
                        <div class="col-md-9">
                            <input asp-for="ConfirmPassword" type="password" sm-required="true" autocomplete="new-password" />
                            <span asp-validation-for="ConfirmPassword"></span>
                        </div>
                    </div>

                    <div sm-if="Model.DisplayCaptcha" class="form-group row justify-content-end">
                        <div class="captcha-box col-md-9">
                            <captcha />
                        </div>
                    </div>
                </fieldset>

                <fieldset sm-if="Model.CompanyEnabled || Model.DisplayVatNumber" class="content-group">
                    <legend><span>@T("Account.CompanyDetails")</span></legend>

                    <div sm-if="Model.CompanyEnabled" class="form-group row">
                        <label asp-for="Company" class="col-md-3 col-form-label" attr-class='(Model.CompanyRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="Company" sm-required="Model.CompanyRequired" class="remember" autocomplete="organization" />
                            <span asp-validation-for="Company"></span>
                        </div>
                    </div>

                    <div sm-if="Model.DisplayVatNumber" class="form-group row">
                        <label id="vat-number-label" asp-for="VatNumber" class="col-md-3 col-form-label" attr-class='(Model.VatRequired, "required")'></label>
                        <div class="col-md-9">
                            <div class="input-group">
                                <input asp-for="VatNumber" 
                                       sm-required="Model.VatRequired" 
                                       class="remember" 
                                       aria-labelledby="vat-number-label vat-number-status" 
                                       aria-describedby="vat-number-note" />
                                <div sm-if="Model.VatNumberStatusNote.HasValue()" class="input-group-append"><span class="input-group-text">@Model.VatNumberStatusNote</span></div>
                            </div>
                            <span asp-validation-for="VatNumber"></span>
                            <div id="vat-number-note" class="form-text text-muted vat-note">@T("Account.Fields.VatNumber.Note")</div>
                        </div>
                    </div>

                </fieldset>

                <fieldset sm-if="Model.StreetAddressEnabled || Model.StreetAddress2Enabled || Model.ZipPostalCodeEnabled || Model.CityEnabled || Model.CountryEnabled" class="content-group">
                    <legend><span>@T("Account.YourAddress")</span></legend>

                    <div sm-if="Model.StreetAddressEnabled" class="form-group row">
                        <label asp-for="StreetAddress" class="col-md-3 col-form-label" attr-class='(Model.StreetAddressRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="StreetAddress" sm-required="Model.StreetAddressRequired" class="remember" autocomplete="address-line1" />
                            <span asp-validation-for="StreetAddress"></span>
                        </div>
                    </div>
                    <div sm-if="Model.StreetAddress2Enabled" class="form-group row">
                        <label asp-for="StreetAddress2" class="col-md-3 col-form-label" attr-class='(Model.StreetAddress2Required, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="StreetAddress2" sm-required="Model.StreetAddress2Required" class="remember" autocomplete="address-line2" />
                            <span asp-validation-for="StreetAddress2"></span>
                        </div>
                    </div>
                    <div sm-if="Model.ZipPostalCodeEnabled" class="form-group row">
                        <label asp-for="ZipPostalCode" class="col-md-3 col-form-label" attr-class='(Model.ZipPostalCodeRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="ZipPostalCode" sm-required="Model.ZipPostalCodeRequired" class="remember" autocomplete="postal-code" />
                            <span asp-validation-for="ZipPostalCode"></span>
                        </div>
                    </div>
                    <div sm-if="Model.CityEnabled" class="form-group row">
                        <label asp-for="City" class="col-md-3 col-form-label" attr-class='(Model.CityRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="City" sm-required="Model.CityRequired" class="remember" autocomplete="address-level2" />
                            <span asp-validation-for="City"></span>
                        </div>
                    </div>

                    <div sm-if="Model.CountryEnabled" class="form-group row">
                        <label id="customer-country-label" asp-for="CountryId" class="col-md-3 col-form-label"></label>
                        <div class="col-md-9">
                            @{
                                var countrySelectorViewData = new
                                {
                                    placeholder = T("Address.SelectCountry").Value,
                                    includeHidden = false,
                                    storeId = CommonServices.StoreContext.CurrentStore.Id,
                                };
                            }
                            <editor asp-for="CountryId"
                                    class="country-input country-selector remember"
                                    asp-template="Countries"
                                    asp-additional-viewdata='countrySelectorViewData'
                                    data-region-control-selector="#@Html.IdFor(x => x.StateProvinceId)"
                                    data-states-ajax-url="@Url.Action("StatesByCountryId", "Common", new { area = string.Empty })"
                                    data-addEmptyStateIfRequired="true"
                                    aria-labelledby="customer-country-label" />
                        </div>
                    </div>

                    <div sm-if="Model.CountryEnabled && Model.StateProvinceEnabled" class="form-group row" attr-class='(Model.StateProvinceRequired, "required")'>
                        <label id="customer-state-province-label" asp-for="StateProvinceId" class="col-md-3 col-form-label"></label>
                        <div class="col-md-9">
                            <select asp-for="StateProvinceId" 
                                    asp-items="ViewBag.AvailableStates" 
                                    sm-required="@Model.StateProvinceRequired" 
                                    placeholder="@T("Common.PleaseSelect")" 
                                    class="remember"
                                    aria-labelledby="customer-state-province-label"></select>
                            <span asp-validation-for="StateProvinceId"></span>
                        </div>
                    </div>
                </fieldset>

                <fieldset sm-if="Model.PhoneEnabled || Model.FaxEnabled" class="content-group">
                    <legend><span>@T("Account.YourContactInformation")</span></legend>
                    <div sm-if="Model.PhoneEnabled" class="form-group row">
                        <label asp-for="Phone" class="col-md-3 col-form-label" attr-class='(Model.PhoneRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="Phone" sm-required="Model.PhoneRequired" class="remember" autocomplete="tel" />
                            <span asp-validation-for="Phone"></span>
                        </div>
                    </div>
                    <div sm-if="Model.FaxEnabled" class="form-group row">
                        <label asp-for="Fax" class="col-md-3 col-form-label" attr-class='(Model.FaxRequired, "required")'></label>
                        <div class="col-md-9">
                            <input asp-for="Fax" sm-required="Model.FaxRequired" class="remember" />
                            <span asp-validation-for="Fax"></span>
                        </div>
                    </div>
                </fieldset>

                <fieldset sm-if="Model.NewsletterEnabled" class="content-group">
                    <legend><span>@T("Account.Options")</span></legend>
                    <div class="form-group row">
                        <div class="col">
                            <div class="form-check">
                                <input asp-for="Newsletter" sm-ignore-label="true" sm-switch="false" class="remember form-check-input" />
                                <label class="form-check-label" for="Newsletter">
                                    @Html.Raw(T("Account.Fields.Newsletter", await Url.TopicAsync("PrivacyInfo")))
                                </label>
                            </div>
                        </div>
                    </div>
                </fieldset>

                <fieldset sm-if="Model.AllowCustomersToSetTimeZone" class="content-group">
                    <legend><span>@T("Account.Preferences")</span></legend>
                    <div class="form-group row">
                        <label asp-for="TimeZoneId" class="col-md-3 col-form-label"></label>
                        <div class="col-md-9">
                            <select asp-for="TimeZoneId" asp-items="ViewBag.AvailableTimeZones" class="remember"></select>
                            <span asp-validation-for="TimeZoneId"></span>
                        </div>
                    </div>
                </fieldset>

                <div class="form-group row">
                    <div class="col-12 text-muted">
                        @T("Common.FormFields.Required.Hint")
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col">
                        <button type="submit" class="btn btn-primary btn-lg" name="register-button" id="register-button">
                            @T("Account.Register.Button")
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script sm-target-zone="scripts" data-origin="register">
    $(function () {
        restoreRememberedFormFields("registerVals");

        _.delay(function () {
            $(".country-selector").trigger("change");
        }, 50);
    });

    const form = document.getElementById('register-form');
    form.addEventListener('focusout', (event) => {
        rememberFormFields("register-form", "registerVals");
    });
</script>